<template>
  <div>
    <div class="recommend-title">
      热销推荐
    </div>
    <ul>     
      <router-link tag="li" class="item" v-for="myitem in list" :key="myitem.id" :to="'/detail/' + myitem.id">
            <div class="img-wrapper"> 
               <img class="item-img" :src="myitem.imgUrl">
            </div>
            <div class="item-info">
                <p class="item-title">{{myitem.title}}</p>
                <p class="item-desc">{{myitem.desc}}</p>
                <button class="item-button">查看详情</button>
            </div>       
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: "HomeRecommend",
  props:{
    list:Array
  }
};
</script>
<style lang="stylus" scoped>
 .recommend-title 
  line-height: 0.8rem;
  text-indent: 0.2rem;
  background: #eee;
  margin-top: 0.2rem;
 .item
  display:flex
  overflow:hidden
  height:1.9rem
  padding:.2rem .2rem 0
  .item-title 
    line-height: .54rem
    font-size: .32rem
  .item-desc
    line-height: .4rem
    color: #ccc
  .item-button
    line-height: .44rem
    margin-top: .16rem
    background: #ff9300
    padding: 0 .2rem
    border-radius: .06rem
    color: #fff
  .img-wrapper
    width:1.9rem
    height:1.9rem
    padding-right:.2rem 
    .item-img 
      height:100%
     
</style>
